import Link from "next/link";
import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { PRIORITY_LABELS } from "@websensor/core/client";
import { EventRow } from "@/components/event-row";
import { FieldChangeInline } from "@/components/field-changes";
import { Chip, Empty, ExtLink, HealthPill, PageHeader, Panel, Stat, Table, Td, TierBadge } from "@/components/ui";
import { api, type SnapshotRow } from "@/lib/api";
import { CLASS_LABELS, dayHeader, fmtBytes, fmtDuration, fmtInt, fmtMs, relTime, shortHash, untilTime, utcDate, utcDateTime, utcTime } from "@/lib/format";

export const dynamic = "force-dynamic";

export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
  const { id } = await params;
  const d = await api.sensor(id);
  return { title: d ? `${d.sensor.source_name} · ${d.sensor.name} — sensor` : "Sensor not found", robots: { index: false } };
}

/** Sensor page with historical memory (spec §79): how this page looked over time. */
export default async function SensorPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const d = await api.sensor(id);
  if (!d) notFound();
  const s = d.sensor;
  const snaps = await api.sensorSnapshots(s.id, 200);
  const history = snaps.items.length ? snaps.items : d.snapshots;
  const runs = s.total_runs ?? 0;
  const checks24 = s.checks_24h ?? 0;
  const nm24 = checks24 ? Math.round(((s.not_modified_24h ?? 0) / checks24) * 100) : null;
  const nmAll = runs ? Math.round(((s.total_not_modified ?? 0) / runs) * 100) : null;
  const events = d.events ?? [];
  const prio = s.priority ?? null;
  // Group snapshots by UTC day (newest first, API order).
  const days: { day: string; rows: SnapshotRow[] }[] = [];
  for (const sn of history) {
    const day = utcDate(sn.captured_at);
    const last = days[days.length - 1];
    if (last && last.day === day) last.rows.push(sn);
    else days.push({ day, rows: [sn] });
  }
  const changeCount = history.filter((x) => x.has_change).length;
  return (
    <>
      <PageHeader
        compact
        kicker={
          <span className="flex flex-wrap items-center gap-2">
            <Link href={`/source/${s.source_id}`} className="hover:underline">{s.source_name}</Link>
            <span className="text-fg-subtle">/</span>
            <span className="font-mono">{s.type}</span>
            <span className="text-fg-subtle">·</span>
            <span className="font-mono text-fg-muted">{s.connector}</span>
            <TierBadge tier={s.tier} />
            {prio !== null && <Chip tone={prio === 0 ? "hot" : prio === 1 ? "high" : "default"} className="font-mono" title={PRIORITY_LABELS[prio] ?? `Priority ${prio}`}>P{prio}</Chip>}
            {s.status && <HealthPill health={s.enabled ? s.status : "DISABLED"} />}
            <HealthPill health={s.enabled ? s.health : "DISABLED"} />
          </span>
        }
        title={s.name}
        description={<ExtLink href={s.url} className="font-mono text-[12px] break-all">{s.url}</ExtLink>}
        actions={
          <>
            <Link href={`/url?u=${encodeURIComponent(s.url)}`} className="rounded-md border border-line bg-panel px-2.5 py-1 text-[12px] hover:border-line-strong">URL history →</Link>
            {s.domain && <Link href={`/domain/${s.domain}`} className="rounded-md border border-line bg-panel px-2.5 py-1 text-[12px] hover:border-line-strong">Domain →</Link>}
          </>
        }
      />

      <div className="panel mb-4 grid grid-cols-2 divide-x divide-y divide-line sm:grid-cols-4 lg:grid-cols-8 lg:divide-y-0">
        <Stat label="Checks · 24 h" value={fmtInt(checks24)} hint={`${fmtInt(runs)} total`} />
        <Stat label="304 · 24 h" value={nm24 !== null ? `${nm24}%` : "—"} hint={nmAll !== null ? `${nmAll}% all-time` : s.has_etag || s.has_last_modified ? "validators exposed" : "no validators"} />
        <Stat label="Errors · 24 h" value={fmtInt(s.errors_24h ?? 0)} tone={(s.errors_24h ?? 0) > 0 ? "warn" : undefined} hint={s.consecutive_errors ? <span className="text-danger">{s.consecutive_errors} consecutive</span> : "0 consecutive"} />
        <Stat label="Avg latency" value={fmtMs(s.avg_ms_24h ?? s.avg_latency_ms)} hint={s.avg_ms_24h !== null && s.avg_ms_24h !== undefined ? "last 24 h" : "all-time"} />
        <Stat label="Raw / meaningful" value={<span>{fmtInt(s.raw_changes)}<span className="text-fg-subtle"> / </span><span className="text-signal">{fmtInt(s.meaningful_changes)}</span></span>} hint={s.raw_changes ? `noise ${Math.round((1 - (s.meaningful_changes ?? 0) / Math.max(1, s.raw_changes)) * 100)}%` : undefined} />
        <Stat label="Snapshots" value={fmtInt(history.length)} hint={`${changeCount} with a change`} />
        <Stat label="Last check" value={s.last_check_at ? relTime(s.last_check_at) : "never"} hint={s.last_status ? `HTTP ${s.last_status}` : undefined} />
        <Stat label="Next check" value={untilTime(s.next_check_at)} hint={s.current_interval_seconds ? `every ${fmtDuration(s.current_interval_seconds)}` : s.base_interval_seconds ? `base ${fmtDuration(s.base_interval_seconds)}` : "adaptive"} />
      </div>
      {s.last_error && (
        <div className="mb-4 rounded-md border border-danger/40 bg-danger/10 px-3 py-2 font-mono text-[12px] text-danger break-words">
          last error · {s.last_error}
        </div>
      )}

      <div className="grid gap-4 xl:grid-cols-[1fr_380px]">
        <div className="flex min-w-0 flex-col gap-4">
          <Panel title={`How this page looked over time · ${history.length} snapshot${history.length === 1 ? "" : "s"}`} dense action={<span className="hidden text-[11px] text-fg-subtle sm:inline">raw bodies may be pruned by retention · canonical form and hashes are kept</span>}>
            {history.length === 0 ? (
              <Empty>No snapshot yet — the first successful check stores the initial state of this page.</Empty>
            ) : (
              <div className="overflow-x-auto">
                <table className="w-full text-[12.5px]">
                  <thead>
                    <tr className="border-b border-line text-left">
                      {["Captured", "HTTP", "Size", "Canonical hash", "Change", "Event", "Raw", "Compare"].map((h) => (
                        <th key={h} className="label whitespace-nowrap px-3 py-2 font-semibold">{h}</th>
                      ))}
                    </tr>
                  </thead>
                  {days.map((g) => (
                    <tbody key={g.day} className="divide-y divide-line border-b border-line">
                      <tr className="bg-panel-2/50">
                        <td colSpan={8} className="px-3 py-1 font-mono text-[10.5px] font-semibold tracking-wider text-fg-subtle">{dayHeader(g.rows[0]!.captured_at)} <span className="font-normal">· {g.rows.length} capture{g.rows.length === 1 ? "" : "s"}</span></td>
                      </tr>
                      {g.rows.map((sn) => {
                        const idx = history.indexOf(sn);
                        const prev = history[idx + 1];
                        return (
                          <tr key={sn.id} className={`hover:bg-panel-2/60 ${sn.has_change ? "border-l-2 border-l-signal/60" : "border-l-2 border-l-transparent"}`}>
                            <Td mono className="whitespace-nowrap"><span title={utcDateTime(sn.captured_at)}>{utcTime(sn.captured_at)}</span> <span className="text-fg-subtle">{relTime(sn.captured_at)}</span></Td>
                            <Td mono className={sn.http_status && sn.http_status >= 400 ? "text-warn" : "text-fg-muted"}>{sn.http_status ?? "—"}</Td>
                            <Td mono className="whitespace-nowrap">{fmtBytes(sn.content_length)}</Td>
                            <Td mono className="text-fg-subtle"><span title={sn.canonical_hash ?? undefined}>{shortHash(sn.canonical_hash)}</span>{sn.mode ? <span className="ml-1.5 text-[10.5px]">{sn.mode}</span> : null}</Td>
                            <Td>{sn.has_change ? <Chip tone="signal" className="font-mono">CHANGED</Chip> : <span className="text-fg-subtle">—</span>}</Td>
                            <Td>{sn.event_slug ? <Link href={`/event/${sn.event_slug}`} className="text-info hover:underline">event →</Link> : <span className="text-fg-subtle">—</span>}</Td>
                            <Td>
                              {sn.has_raw === false ? (
                                <span className="cursor-not-allowed text-fg-subtle line-through" title="raw body pruned by retention">view raw</span>
                              ) : (
                                <a href={`/api/v1/snapshots/${sn.id}?raw=1`} target="_blank" rel="noopener noreferrer" className="text-info hover:underline">view raw</a>
                              )}
                            </Td>
                            <Td>{prev ? <Link href={`/compare?a=${prev.id}&b=${sn.id}`} className="whitespace-nowrap text-info hover:underline">compare with previous</Link> : <span className="text-fg-subtle">first capture</span>}</Td>
                          </tr>
                        );
                      })}
                    </tbody>
                  ))}
                </table>
              </div>
            )}
          </Panel>

          <Panel title={`Changes · ${d.changes.length}`} dense>
            {d.changes.length ? (
              <Table head={["Detected", "Kind", "Class", "Signal", "Meaningful", "What changed", "Links"]}>
                {d.changes.map((c) => (
                  <tr key={c.id} className="hover:bg-panel-2/60">
                    <Td mono className="whitespace-nowrap text-fg-subtle"><span title={utcDateTime(c.detected_at)}>{utcDate(c.detected_at)} {utcTime(c.detected_at, false)}</span></Td>
                    <Td mono>{c.kind}</Td>
                    <Td>{c.change_class ? <Chip tone={c.change_class === "pricing" || c.change_class === "policy" ? "high" : c.change_class === "meaningful" || c.change_class === "product" || c.change_class === "personnel" ? "signal" : "default"}>{CLASS_LABELS[c.change_class] ?? c.change_class}</Chip> : c.heuristic_type ? <Chip>{c.heuristic_type.replace(/_/g, " ")}</Chip> : <span className="text-fg-subtle">—</span>}</Td>
                    <Td mono className={c.signal >= 0.32 ? "text-signal" : "text-fg-subtle"}>{c.signal.toFixed(2)}{c.noise_ratio !== undefined && c.noise_ratio > 0 ? <span className="ml-1 text-[10.5px] text-fg-subtle">noise {Math.round(c.noise_ratio * 100)}%</span> : null}</Td>
                    <Td>{c.meaningful ? <Chip tone="ok" className="font-mono">YES</Chip> : <span className="font-mono text-[11px] text-fg-subtle">filtered</span>}</Td>
                    <Td className="min-w-[14rem]">{c.field_changes?.length ? <FieldChangeInline items={c.field_changes} max={2} /> : c.magnitude !== undefined && c.magnitude !== null ? <span className="font-mono text-[11px] text-fg-subtle">magnitude {c.magnitude}</span> : <span className="text-fg-subtle">—</span>}</Td>
                    <Td className="whitespace-nowrap">
                      {c.event_id && <Link href={`/event/${c.event_id}`} className="text-info hover:underline">event</Link>}
                      {c.event_id && c.old_snapshot_id && c.new_snapshot_id && <span className="text-fg-subtle"> · </span>}
                      {c.old_snapshot_id && c.new_snapshot_id && <Link href={`/compare?a=${c.old_snapshot_id}&b=${c.new_snapshot_id}`} className="text-info hover:underline">diff</Link>}
                      {!c.event_id && !(c.old_snapshot_id && c.new_snapshot_id) && <span className="text-fg-subtle">—</span>}
                    </Td>
                  </tr>
                ))}
              </Table>
            ) : (
              <Empty>No change detected yet.</Empty>
            )}
          </Panel>

          <Panel title={`Runs · ${d.runs.length}`} dense>
            {d.runs.length ? (
              <Table head={["Started", "Outcome", "HTTP", "Duration", "Bytes", "Method", "Error"]}>
                {d.runs.map((r) => (
                  <tr key={r.id} className="hover:bg-panel-2/60">
                    <Td mono className="whitespace-nowrap text-fg-subtle">{utcDateTime(r.started_at)}</Td>
                    <Td><Chip tone={r.outcome === "event" ? "signal" : r.outcome === "changed" ? "info" : r.outcome === "error" || r.outcome === "parse_error" ? "danger" : r.outcome === "rate_limited" || r.outcome === "missing" ? "warn" : "default"}>{r.outcome}</Chip></Td>
                    <Td mono>{r.http_status ?? "—"}</Td>
                    <Td mono>{fmtMs(r.duration_ms)}</Td>
                    <Td mono>{fmtBytes(r.bytes)}</Td>
                    <Td mono className="text-fg-subtle">{r.fetch_method ?? "—"}</Td>
                    <Td className="max-w-[24rem] truncate text-danger" >{r.error ?? ""}</Td>
                  </tr>
                ))}
              </Table>
            ) : (
              <Empty>No run recorded in the retained window.</Empty>
            )}
          </Panel>
        </div>

        <aside className="flex min-w-0 flex-col gap-4">
          <Panel title={`Events · ${events.length}`} dense action={<Link href={`/source/${s.source_id}`} className="text-[11px] text-fg-subtle hover:text-fg">source →</Link>}>
            {events.length ? events.map((e) => <EventRow key={e.id} ev={e} showDate />) : <Empty>No meaningful event from this sensor yet — raw changes that are noise never become events.</Empty>}
          </Panel>
          <Panel title="Conditional requests">
            <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-[12.5px]">
              <dt className="text-fg-subtle">ETag</dt><dd className="min-w-0 truncate font-mono text-[11.5px]" title={s.etag ?? undefined}>{s.etag ?? <span className="text-fg-subtle">not exposed</span>}</dd>
              <dt className="text-fg-subtle">Last-Modified</dt><dd className="min-w-0 truncate font-mono text-[11.5px]" title={s.last_modified ?? undefined}>{s.last_modified ?? <span className="text-fg-subtle">not exposed</span>}</dd>
              <dt className="text-fg-subtle">Last change</dt><dd className="font-mono text-[11.5px]">{s.last_change_at ? relTime(s.last_change_at) : "—"}</dd>
              <dt className="text-fg-subtle">Last event</dt><dd className="font-mono text-[11.5px]">{s.last_event_at ? relTime(s.last_event_at) : "—"}</dd>
              <dt className="text-fg-subtle">Validated</dt><dd className="font-mono text-[11.5px]">{s.validated_at ? relTime(s.validated_at) : "—"}</dd>
            </dl>
          </Panel>
        </aside>
      </div>
    </>
  );
}